<!--
 * @author: sanbao
 * @Date: 2022-08-01 10:44:14
-->
<style lang='scss' scoped>
.banxin_center {
  display: flex;
  .left {
    flex: 1;
    img {
      width: 100%;
    }
    :deep(.el-carousel__container) {
      height: 700px;
    }
  }
  .right {
    flex: 1;
    padding: 50px;
    box-sizing: border-box;
    > P {
      color: #666;
      margin: 10px;
    }
    .awrp {
      background-color: rgb(230, 224, 224);
      padding: 20px;
      margin-top: 50px;
      > P {
        display: flex;
        justify-content: space-between;
        margin-bottom: 50px;
      }
      h1 {
        color: red;
        font-weight: 400;
      }
    }
    .button {
      display: flex;
      justify-content: space-between;
      button {
        padding: 30px 100px;
        margin-top: 50px;
      }
    }
  }
}
</style>

<template>
  <div class="details">
    <div class="banxin_center">
      <div class="left">
        <el-carousel>
          <el-carousel-item v-for="(item, index) in imagelist" :key="index">
            <img
              :src="'http://101.132.181.9:3000/' + `${item.product_picture}`"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right">
        <h2>{{ details.product_name }}</h2>
        <p>{{ details.product_intro }}</p>
        <span>
          <s style="color: red">{{ details.product_selling_price }}</s>
          {{ details.product_price }}
        </span>
        <hr />
        <div class="awrp">
          <p>
            <span>
              {{ details.product_name }}
            </span>
            <span>
              <s style="color: red">{{ details.product_selling_price }}</s>
              {{ details.product_price }}
            </span>
          </p>
          <h1>总价:{{ details.product_selling_price }}元</h1>
        </div>
        <div class="button">
          <el-button type="danger" @click="addshoplist">加入购物车</el-button>
          <el-button type="info" @click="addCollectlist">喜欢</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import Model from "@/api";
import ModelShop from "@/api/shop";
import { ElNotification } from "element-plus";
export default {
  components: {},
  setup() {
    onMounted(() => {
      getdetails();
    });
    const data = reactive({
      imagelist: [],
      details: {},
    });
    const store = useStore();
    const route = useRoute();
    const getdetails = async () => {
      let object = {
        productID: route.query.id,
      };
      const imagelist = await Model.postgetDetailsPicture(object);
      data.imagelist = imagelist.data.ProductPicture;
      const response = await Model.getDetails(object);
      data.details = response.data.Product[0];
    };
    const addshoplist = async () => {
      let id = store.state.userlist.user_id;
      let obj = {
        product_id: route.query.id,
        user_id: id,
      };
      let shoplist = {
        image: data.details.product_picture,
        price: data.details.product_price,
        name: data.details.product_name,
        num: 1,
        flag: false,
      };
      const response = await ModelShop.addShoppingCart(obj);
      if (response.data.code == "001") {
        ElNotification.success(response.data.msg);
      } else if (response.data.code == "002") {
        ElNotification.success(response.data.msg);
      } else {
        ElNotification.success(response.data.msg);
      }
    };
    const addCollectlist = async () => {
      let id = store.state.userlist.user_id;
      let obj = {
        product_id: route.query.id,
        user_id: id,
      };
      const response = await ModelShop.addCollect(obj);
      if (response.data.code == "001") {
        ElNotification.success(response.data.msg);
      } else {
        ElNotification.error(response.data.msg);
      }
    };
    return {
      ...toRefs(data),
      addshoplist,
      addCollectlist,
    };
  },
};
</script>
